<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div>
    <div class="abstatic-height"></div>
    <div class="container">
      <!-- <el-tabs style='margin-top:15px;' v-model="activeName">
      <el-tab-pane v-for="item in tabMapOptions" :label="item.name" :key='item.id' :name="item.code">
        <keep-alive>
          <tab-pane v-if='activeName==item.code' :type='item.id'></tab-pane>
        </keep-alive>
      </el-tab-pane>
    </el-tabs> -->
      <el-row>
        <el-button type="primary" @click="showaddrole" size="mini"
          >添加角色</el-button
        >
        <div style="float:right;">
          <span style="font-size: 14px;color: rgba(255,255,255,.7)">角色</span>
          <el-input
            @keyup.enter.native="handleFilter"
            style="width: 200px;margin:0 10px;"
            class="filter-item"
            v-model="listQuery.name"
            size="mini"
          >
          </el-input>
          <el-button
            class="filter-item"
            type="primary"
            icon="search"
            @click="handleFilter"
            size="mini"
            >查询</el-button
          >
        </div>
      </el-row>
      <br />
      <border-warp widthAuto>
        <el-table
          ref="multipleTable"
          :data="rolelist"
          v-loading.body="listLoading"
          style="width: 100%;margin-top: 10px;"
          header-row-class-name="headerbg"
        >
          <!-- <el-table-column label="序号">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column> -->
          <el-table-column label="角色">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <span @click="handleUpdate(scope.row)" class="comm-table-btn"
                ><icon-svg icon-class="bianji" style="fill:#2bdef5"
              /></span>
              <span @click="handleDelete(scope.row)" class="comm-table-btn"
                ><icon-svg icon-class="shanchu" style="fill:#2bdef5"
              /></span>
              <span @click="handleAuth(scope.row)" class="comm-table-btn"
                ><icon-svg icon-class="qxfp" style="fill:#2bdef5"
              /></span>
            </template>
          </el-table-column>
        </el-table>
      </border-warp>
      <el-footer>
        <el-pagination
          style="float:right;margin-top: 7px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-footer>

      <el-dialog
        :visible.sync="iseditauth"
        title="权限分配"
        :show-close="false"
      >
        <el-tree
          :data="authtreedata"
          show-checkbox
          node-key="id"
          @check="nodecheck"
          :props="defaultprops"
          ref="treedata"
          :expand-on-click-node="false"
          :check-strictly="strictmodel"
          :default-expand-all="true"
        >
        </el-tree>
        <!-- <h2>可视化大屏</h2>
      <el-checkbox-group v-model="viewscreen" style="width: 500px;">
        <el-checkbox label="数据大屏" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <el-checkbox label="设备运行情况" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <div style="clear: both;"></div>
      </el-checkbox-group>
      <h2>APP</h2>
      <el-checkbox-group v-model="apps" style="width: 500px;">
        <el-checkbox label="报警信息" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <el-checkbox label="交接班" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <el-checkbox label="维保工作" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <el-checkbox label="电气火灾" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <div style="clear: both;"></div>
      </el-checkbox-group> -->
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveauth" size="mini"
            >保 存</el-button
          >
          <el-button @click="cancel" size="mini" type="text">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="删除角色"
        :visible.sync="isdelrole"
        :show-close="false"
        custom-class="xf-jc-dialog"
        width="360px"
        height="160px"
      >
        <div class="xf-jc-deletect">
          <p>{{ delusertext }}</p>
        </div>
        <div slot="footer" class="dialog-footer" v-if="percount == 0">
          <el-button type="danger" size="mini" @click="delrole">删除</el-button>
          <el-button type="text" size="mini" @click="isdelrole = false"
            >取消</el-button
          >
        </div>
        <div slot="footer" class="dialog-footer" v-else>
          <el-button type="primary" size="mini" @click="isdelrole = false"
            >知道了</el-button
          >
        </div>
      </el-dialog>
      <slider-panel :Show.sync="isaddrole" custom-class="out-side-frame">
        <div class="form-content-class">
          <el-form
            label-position="top"
            ref="roleform"
            label-width="80px"
            :model="rolename"
            :rules="rolerules"
            @submit.native.prevent
          >
            <el-form-item label="角色" prop="name">
              <el-input
                v-model.trim="rolename.name"
                placeholder="最多输入50个字符"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="roletitle == '添加角色'"
                type="primary"
                @click="addrole('roleform')"
                size="mini"
                native-type="submit"
                >保 存</el-button
              >
              <el-button
                v-else
                type="primary"
                @click="saverole('roleform')"
                size="mini"
                native-type="submit"
                >保 存</el-button
              >
              <el-button @click="rolecancel('roleform')" type="text" size="mini"
                >取 消</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </slider-panel>
    </div>
  </div>
</template>

<script>
import {
  getAllGroupTypes,
  addObj,
  putObj,
  delObj,
  getSpeObj,
  getQuerylist,
  getUserMenu,
  editGroup
} from "@/api/admin/group/index";
import sliderPanel from "@/components/SliderPanel";
export default {
  name: "group",
  components: { sliderPanel },
  data() {
    return {
      listQuery: {
        page: 1,
        name: "",
        limit: 10
      },
      total: null,
      rolelist: [],
      listLoading: false,
      iseditauth: false,
      viewscreen: [],
      apps: [],
      curroleid: "",
      isdelrole: false,
      isaddrole: false,
      rolename: {
        name: ""
      },
      rolerules: {
        name: [
          {
            required: true,
            message: "请输入角色",
            trigger: "blur"
          },
          {
            min: 1,
            max: 50,
            message: "最多输入50个字符",
            trigger: "blur"
          }
        ]
      },
      delusertext: "",
      roletitle: "",
      roleupdateid: "",
      authtreedata: [
        {
          id: 0,
          title: "管理后台",
          children: []
        }
      ],
      defaultprops: {
        label: "title"
      },
      seledauth: [],
      strictmodel: true,
      percount: 0
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getAllGroupTypes({
        page: this.listQuery.page,
        limit: this.listQuery.limit
      }).then(data => {
        this.rolelist = data.data.rows;
        this.total = data.data.total;
        this.listLoading = false;
      });
    },
    searchDate() {
      this.listLoading = true;
      getQuerylist(this.listQuery).then(res => {
        this.rolelist = res.data.rows;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    showaddrole() {
      this.roletitle = "添加角色";
      this.isaddrole = true;
    },
    handleUpdate(row) {
      this.$refs["roleform"].resetFields();
      this.roletitle = "编辑角色";
      this.rolename.name = row.name;
      this.roleupdateid = row.id;
      this.isaddrole = true;
    },
    handleDelete(row) {
      this.roleupdateid = row.id;
      this.delusertext = "";
      getSpeObj({ groupId: row.id }).then(res => {
        this.percount = res.data;
        res.data == 0
          ? (this.delusertext = `确定删除“${row.name}”这个角色吗？`)
          : (this.delusertext = `有${res.data}个用户属于${
              row.name
            }角色，请先将用户与角色解绑`);
        this.isdelrole = true;
      });
    },
    handleAuth(row) {
      this.curroleid = row.id;
      this.iseditauth = true;
      this.strictmodel = true;
      this.authtreedata = [
        {
          id: 0,
          title: "管理后台",
          children: []
        }
      ];
      getUserMenu({ groupId: this.curroleid })
        .then(res => {
          this.authtreedata[0].children = res.data.menus;
          return res;
        })
        .then(res => {
          this.strictmodel = false;
          if (res.data.ids != "") {
            this.$refs["treedata"].setCheckedKeys([0, ...res.data.ids], false);
          }
        })
        .then(() => {
          this.strictmodel = false;
        });
    },
    saveauth() {
      let data = this.$refs["treedata"].getCheckedNodes(false, true);
      let menuIds = [];
      data.forEach((item, index) => {
        menuIds.push(item.id);
      });
      editGroup({ groupId: this.curroleid, menuIds: menuIds.toString() }).then(
        res => {
          if (res.status == 200) {
            this.$notify({
              title: "成功",
              message: "权限分配成功",
              type: "success",
              duration: 2000
            });
            this.iseditauth = false;
            this.$refs["treedata"].setCheckedKeys([]);
          } else {
            this.$notify({
              title: "提示",
              message: res.message,
              type: "warning",
              duration: 2000
            });
            this.iseditauth = false;
            this.$refs["treedata"].setCheckedKeys([]);
          }
        }
      );
    },
    cancel() {
      this.iseditauth = false;
      this.apps = [];
      this.$refs["treedata"].setCheckedKeys([]);
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.searchDate();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.searchDate();
    },
    delrole() {
      delObj(this.roleupdateid).then(res => {
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
          duration: 2000
        });
        this.isdelrole = false;
        this.fetchData();
      });
    },
    addrole(formname) {
      this.$refs[formname].validate(val => {
        if (val) {
          addObj({ name: this.rolename.name }).then(res => {
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000
            });
            this.isaddrole = false;
            this.$refs[formname].resetFields();
            this.fetchData();
          });
        } else {
          return false;
        }
      });
    },
    saverole(formname) {
      this.$refs[formname].validate(val => {
        if (val) {
          putObj(this.roleupdateid, {
            id: this.roleupdateid,
            name: this.rolename.name
          }).then(res => {
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
            this.isaddrole = false;
            this.$refs[formname].resetFields();
            this.fetchData();
          });
        } else {
          return false;
        }
      });
    },
    rolecancel(formname) {
      this.$refs[formname].resetFields();
      this.isaddrole = false;
      this.rolename.name = "";
    },
    handleFilter() {
      if (this.listQuery.name == "") {
        this.fetchData();
      } else {
        this.searchDate();
      }
    },
    nodecheck(data, node) {}
  }
};
</script>

<style lang="scss">
.el-table th {
  background: #f5f7fa;
}
.container {
  margin: 0 30px 30px;
}
h2,
h4 {
  color: #000;
}

.fulldialog .el-dialog__title {
  font-size: 32px;
}
.fulldialog {
  .el-dialog__header {
    margin-top: 20px;
  }
  .el-checkbox {
    display: block;
    margin-left: 0;
  }
  .custom-dialog-btn {
    position: absolute;
    font-size: 30px;
    right: 40px;
    top: 20px;
    color: #fff;
    &:hover {
      cursor: pointer;
    }
  }
  .dialog-footer {
    text-align: left;
  }
}
.xf-jc-dialog {
  margin-top: 15vh !important;
}
</style>
